﻿
@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>photos</title>
    <link rel="stylesheet" type="text/css" href="~/lib/layui-v2.5.6/layui/css/layui.css" />
    <script src="~/lib/layui-v2.5.6/layui/layui.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
    <form class="layui-form" action="">

        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" id="chaxun" lay-filter="formDemo">查询</button>
                <button class="layui-btn layui-btn-primary" id="tianjia">添加</button>
            </div>
        </div>
    </form>
    <script type="text/html" id="barDemo">
        <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
    </script>
    <table id="demo" lay-filter="test"></table>
    <script>
        layui.use(['table', 'layer'], function () {
            var table = layui.table;
            var $ = layui.$;
            var layer = layui.layer;
            table.render({
                elem: '#demo'
              , toolbar: '#toolbarDemo'
              , height: 485
              , id: 'idTest'
              , url: '/Shop/GetImg/'
              , page: true
              , cols: [[
                  { type: 'checkbox' }
                , { field: 'Id', title: '编号', width: 100, sort: true, }
               // , { field: 'Img', title: '图片', width: 100 }
               , { field: 'Img', title: '图片', width: 77, templet: '<div><img src="/{{d.Img}}" style="width:60px; height:60px;"></div>' }
                , { field: 'ProductName', title: '商品名称', width: 100 }

                , { fixed: 'right', width: 130, align: 'center', toolbar: '#barDemo' } //这里的toolbar值是模板元素的选择器
              ]]
                 , where: {
                     Id:@ViewBag.Id     }

            });
            $("#chaxun").click(function () {
                table.reload('idTest', {
                    where: {
                        Id:@ViewBag.Id,
                    }
                });
                return false;
            });
            $("#tianjia").click(function () {
               
                layer.open({
                    type:2,
                    area:['700px', '450px'],
                    content:'/Shop/ImgTianJia?ids='+@ViewBag.Id,
                });
                return false;
            });
            table.on('tool(test)', function (obj) {
                var data = obj.data;
                var layEvent = obj.event;
                var tr = obj.tr;
                if (layEvent === 'detail') {
                }
                else if (layEvent === 'del') {
                    layer.confirm('真的删除行么', function (index) {
                        $.post("/Shop/DelDataImg", { Id: data.Id }, function (re) {
                            if (re > 0) {
                                layer.msg("删除成功！");
                                layui.$("#chaxun").click();
                                obj.del();
                            } else {
                                layer.msg("删除失败！！");
                            }
                        }, "text")
                        layer.close(index);

                    });
                } else if (layEvent === 'edit') {
                    //do something
                    layer.open({
                        type: 2,
                        area: ['700px', '450px'],
                        content: '/ShangPin/EditImg?Id=' + data.Id
                    });
                }
            });
        })
    </script>
</body>
</html>
